<template>
  
  <div>
    <h1>前台用户管理</h1>
    <div>
      <template>
          <el-form>
             <el-form-item label="名字：" label-width="80px">
                <el-input v-model="data.beforeUserName" style="width:100px;margin-left:5px"></el-input>
                <el-button type="primary" style="margin-left:10px" @click="fourQueryAll(data)">查询</el-button>
                <el-checkbox v-model="checked" style="margin-left:50px"  @change="fourQueryAll(data)">查询所有商户</el-checkbox>
                <el-checkbox v-model="checkeduser" style="margin-left:50px"  @change="fourQueryAll(data)">查询所有用户</el-checkbox>
            </el-form-item>
          </el-form>
          
          <el-table
          :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
          border
          style="width: 100%"
          :row-style="{height:'160px'}"
          >
            <el-table-column
              fixed
              prop="beforeUserId"
              label="id"
              width="120"
              align="center"
              >
            </el-table-column>
            <el-table-column
              prop="beforeUserName"
              label="用户姓名"
              width="180"
              align="center">
            </el-table-column>
            <el-table-column
              prop="beforePassword"
              label="用户密码"
              width="180"
              align="center">
            </el-table-column>
            <el-table-column
              prop="beforeUserNickName"
              label="用户昵称"
              width="150"
              align="center">
            </el-table-column>
            <el-table-column
              
              label="用户身份"
              width="120"
              align="center">
              <template slot-scope="scope">
                  {{scope.row.beforeRoleId==1?'商户':'用户'}}
              </template>
            </el-table-column>
            <el-table-column
              label="头像"
              align="center"
              width="120"
              >
              <template slot-scope="scope">
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="scope.row.beforeUserImg">
                  </el-image>   
              </template>
               

            <!-- prop="beforeUserImg"
              label="头像"
              width="120"
              align="center" -->

            </el-table-column>
            <el-table-column
              label="账号状态"
              width="120"
              align="center">
              <template slot-scope="scope">
                  {{scope.row.beforeUserDelete==1?'正常':'已注销'}}
              </template>
            </el-table-column>
            <el-table-column
              label="是否认证"
              width="120"
              align="center">
              <template slot-scope="scope">
                  {{scope.row.beforeUserLeavel==1?'是':'否'}}
              </template>
            </el-table-column>
            <el-table-column
              prop="beforeUserEmail"
              label="邮箱"
              width="180"
              align="center">
            </el-table-column>
            <el-table-column
              prop="balance"
              label="余额"
              width="120"
              align="center">
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="200"
              align="center">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="clickEditButton(scope.row),upedit=true">
                  <el-tag
                    type="warning"
                    effect="dark">
                   编辑
                  </el-tag>
                  </el-button>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination
               @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[3, 5, 10, 20]" 
              :page-size="pagesize"        
              layout="total, sizes, prev, pager, next, jumper"
              :total="tableData.length">   
          </el-pagination>


          <template>
             <el-dialog title="用户信息修改"  :visible.sync="upedit" width="30%" :before-close="handleClose" :close-on-click-modal="false">
                <el-form label-width="100px">

                  <el-form-item label="用户姓名">
                      <el-input v-model="editusers.beforeUserName"></el-input>
                  </el-form-item>
                  <el-form-item label="用户密码">
                      <el-input v-model="editusers.beforePassword"></el-input>
                  </el-form-item>
                  <!-- <el-form-item label="头像">
                      <el-input v-model="editusers.beforeUserImg"></el-input>
                  </el-form-item> -->
                  <el-form-item label="用户昵称">
                      <el-input v-model="editusers.beforeUserNickName"></el-input>
                  </el-form-item>
                  <el-form-item label="用户身份">
                      <el-select v-model="editusers.beforeRoleId" placeholder="请选择">
                          <el-option v-for="item in beforeRoleId" :key="item.id" :value="item.id" :label="item.laber"></el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item label="账号状态">
                      <el-select v-model="editusers.beforeUserDelete" placeholder="请选择">
                          <el-option v-for="item in beforeUserDeletes" :key="item.id" :value="item.id" :label="item.laber"></el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item label="邮箱">
                      <el-input v-model="editusers.beforeUserEmail"></el-input>
                  </el-form-item>
                  <el-form-item>
                        <el-button @click="fourEditClick(editusers)">确定</el-button>
                        <el-button @click="closeEditButton">取消</el-button>
                    </el-form-item>
              </el-form>
             </el-dialog>
          </template>
      </template>
    </div>
  </div>

</template>

<script>
import Api from '@/api/afterUser/afterUserCRUD'
export default {
      data(){
        return{
            // 所有用户信息
            tableData:[],
            // 判断是否查询商户
            checked:false,
            // 判断是否查询用户
            checkeduser:false,
            // 查询的数据
            data:{beforeUserName:'',beforeRoleId:undefined},
            //判断编辑的对话框
            upedit:false,
            //修改上传的用户信息
            editusers:{},
            //用户身份下拉框
            beforeRoleId:[{id:0,laber:'用户'},{id:1,laber:'商户'}],
            //删除状态下拉框
            beforeUserDeletes:[{id:0,laber:'注销'},{id:1,laber:'正常'}],
            //初始页
            currentPage:1, 
            //每页的数据　
            pagesize:3,    
        }
      },
      created(){
        this.fourQueryAll()
      },
      methods:{
        // 查询所有用户
        fourQueryAll(data){
          if(this.checked == true && this.checkeduser == false){
            this.data.beforeRoleId = 1
          }
          else if(this.checkeduser == true && this.checked == false){
            this.data.beforeRoleId = 0
          }else{
            this.data.beforeRoleId = undefined
          }
            data = this.data
            Api.fourQueryAll(data).then(ref =>{
            this.tableData = ref.data.data    
          }).catch(err =>{
              data = this.data
              console.log(data);
              console.log('用户数据获取失败');
          })
        },
        //修改
        fourEditClick(data){
          Api.fourEditClick(data).then(ref =>{
            this.$message({message:'修改成功',type:'success'})
            this.upedit = false
          }).catch(err =>{
            console.log('修改失败');
          })
        },
        //对话框关闭按钮
        handleClose(){
          this.upedit = false
          this.editusers = {}
        },
        //编辑按钮
        clickEditButton(data){
          this.editusers = data
        },
        //对话框取消按钮
        closeEditButton(){
          this.upedit = false
          this.editusers = {}
        },
        // 初始页currentPage、初始每页数据数pagesize和数据data
        handleSizeChange(size) {
                    this.pagesize = size;
                    console.log(this.pagesize)  //每页下拉显示数据
            },
        handleCurrentChange(currentPage){
                this.currentPage = currentPage;
                console.log(this.currentPage)  //点击第几页
        },
      }
}
</script>

<style>

</style>